<!--
 * @Description: What's this for
 
 * @Date: 2022-02-07 09:18:48
 
 * @LastEditTime: 2022-04-13 17:33:39
-->
<template>
  <VolBox title="二维码预览" :model.sync="show" :height="450" >
    <ul class="flex row-around pt20">
      <li>
        <div class="flex-column row-center mb20">
          <img class="w200 h200 mb20" :src="getQr()" />
          <span class="lb-1 f-h5-grey">请扫码预览H5商城</span>
        </div>
      </li>
      <li>
        <div class="flex-column row-center">
          <img class="w200 h200 mb20" :src="WXCode" />
          <span class="lb-1 f-h5-grey">请扫码预览小程序商城</span>
        </div>
      </li>
    </ul>
    <div class="mt40">
      <el-input placeholder="请输入内容" v-model="url">
        <template slot="append"
          ><el-button
            type="primary"
            icon="el-icon-link"
            @click="link"
          ></el-button
        ></template>
      </el-input>
      <h3 class="mt5 mb10 f12 f-h5-grey">H5商城链接，可跳转直接在浏览器查看</h3>
    </div>
  </VolBox>
</template>

<script>
//import { mapGetters } from "vuex";
//import { createWXcode } from "@/api/project";
import VolBox from "@/components/basic/VolBox.vue";
import global from "@/config/global";

export default {
  data() {
    return {
      show: false,
      WXCode: "",
      url: "",
      project:"",
    }
  },
  components: {
    VolBox,
  },
  computed: {
    //...mapGetters(["project"]),
  },
  watch:{
    project:{
        handler(newval,oldval){
          this.$store.getters.data().project=newval;
        },
        deep:true
      }
  },

  methods: {
    open() {
      this.show = true;
      this.getWXQr();
    },

    getQr() {
      this.url = `${global.viewUrl}pages/index/tabbar/home?id=${this.project.id}&supplierCode=${this.project.supplierCode}`;

      let options = {
        padding: 10, // 二维码四边空白（默认为10px）
        width: 160, // 二维码图片宽度（默认为256px）
        height: 160, // 二维码图片高度（默认为256px）
        reverse: false, // 反色二维码，二维码颜色为上层容器的背景颜色
        background: "#ffffff", // 二维码背景颜色（默认白色）
        foreground: "#000000", // 二维码颜色（默认黑色）
      };
      //console.log("预览地址:" + this.url);
      return jrQrcode.getQrBase64(this.url, options);
    },

    async getWXQr() {

      this.http.get("api/Stores/createWXcode?ProjectId="+this.project.id,false).then(reslut=>{
          if(reslut.status){
            this.WXCode =this.http.ipAddress+ reslut.data;
            //this.model=true;
            //this.$store.getters.data().project=null
          }else{
            //this.project=reslut.rows[0];
            //this.project.config=JSON.parse(reslut.rows[0].config);
            //this.project.pages=JSON.parse(reslut.rows[0].pages);
          }
      });

      //let { data } = await createWXcode({ ProjectId:  });
      
    },

    link() {
      window.open(this.url);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  display: none !important;
}
</style>